<template>
  <!-- 系统抽屉 -->
  <el-dialog :model-value="visible" :title="props.title" width="600px" center align-center destroy-on-close @close="handleClose">
    <div v-if="step === 1">
      <el-tree ref="treeRef" :data="treeList" :props="defaultProps" node-key="id" check-strictly accordion highlight-current show-checkbox />
    </div>
    <div v-if="step === 2">
      <div class="random-info">设置题型数量（单次最多抽取1000道）</div>
      <div v-for="(item, index) in questionTypeList" :key="index" class="random-set">
        <div v-if="item.questionType === 1">单选题 <el-input-number v-model="formModel.typeCounts[index].count" controls-position="right" />/&nbsp;{{ item.count }}</div>
        <div v-if="item.questionType === 2">多选题 <el-input-number v-model="formModel.typeCounts[index].count" controls-position="right" />/&nbsp;{{ item.count }}</div>
        <div v-if="item.questionType === 3">判断题 <el-input-number v-model="formModel.typeCounts[index].count" controls-position="right" />/&nbsp;{{ item.count }}</div>
        <div v-if="item.questionType === 4">填空题 <el-input-number v-model="formModel.typeCounts[index].count" controls-position="right" />/&nbsp;{{ item.count }}</div>
        <div v-if="item.questionType === 5">简答题 <el-input-number v-model="formModel.typeCounts[index].count" controls-position="right" />/&nbsp;{{ item.count }}</div>
        <div v-if="item.questionType === 6">材料题 <el-input-number v-model="formModel.typeCounts[index].count" controls-position="right" />/&nbsp;{{ item.count }}</div>
      </div>
    </div>

    <template #footer>
      <el-button v-if="step === 1" @click="handleClose()">取 消</el-button>
      <el-button v-if="step === 1" type="primary" @click="handleNext()">下一步</el-button>
      <el-button v-if="step === 2" @click="handlePrev()">上一步</el-button>
      <el-button v-if="step === 2" type="primary" @click="handleSubmit()">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import { nextTick, onMounted, reactive, ref } from 'vue'
  import { questionApi } from '@/api/question.js'
  import { commonApi } from '@/api/common.js'
  const step = ref(1)
  const props = defineProps({
    title: {
      type: String,
      default: '选择试题目录'
    },
    visible: {
      type: Boolean,
      default: false
    },
    excludeIds: {
      type: Array,
      default: undefined
    }
  })

  const formModel = reactive({ excludeIds: props.excludeIds, categoryIds: [], typeCounts: [] })
  // 题型
  const questionTypeList = ref([])
  // 下一步
  const handleNext = async () => {
    // 获取目录分类下的题型和数量
    formModel.categoryIds = []
    const checkedNodes = treeRef.value.getCheckedNodes()
    checkedNodes.forEach((item) => {
      formModel.categoryIds.push(item.id)
    })
    questionTypeList.value = await questionApi.questionTypeStat(formModel)
    questionTypeList.value.forEach((item) => {
      formModel.typeCounts.push({ questionType: item.questionType, count: 0 })
    })
    step.value = 2
  }
  // 上一步
  const handlePrev = () => {
    step.value = 1
    nextTick(() => {
      treeRef.value.setCheckedKeys(formModel.categoryIds, true)
    })
  }

  const emit = defineEmits(['close'])
  const treeRef = ref()
  // 提交
  const handleSubmit = async () => {
    let questionList = [] // 选中的试题
    questionList = await questionApi.questionRandom(formModel)
    questionList.forEach((item) => {
      item.questionId = item.id
    })
    emit('close', questionList, 2)
  }
  // 关闭
  const handleClose = () => {
    emit('close', null, 2)
  }

  const treeList = ref([])
  onMounted(async () => {
    treeList.value = await commonApi.categoryList({ categoryType: 3 })
  })

  // defaultProps
  const defaultProps = { value: 'id', label: 'categoryName', children: 'childrenList' }
</script>
<style lang="scss" scoped>
  .random-info {
    margin-bottom: 20px;
  }
  .random-set {
    margin-left: 50px;
    margin-bottom: 10px;
    .el-input-number {
      margin: 0 10px;
    }
  }
</style>
